<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="header-title">加油记录管理</view>
			<uni-icons type="plus" size="24" color="white" @click="addRecord"></uni-icons>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-search-bar @input="onSearchInput" @confirm="onSearchConfirm" :placeholder="'请输入司机姓名'"
				:value="keyword"></uni-search-bar>
		</view>

		<!-- 下拉刷新区域 -->
		<view v-if="refreshing" class="refresh-indicator">
			<uni-icons type="refresh" size="20" color="#95a5a6" :class="{ spinning: refreshing }"></uni-icons>
			刷新中...
		</view>

		<!-- 记录列表 -->
		<scroll-view scroll-y="true" style="height: calc(100vh - 180rpx);" @scrolltolower="loadMore"
			:scroll-with-animation="true" @refresherrefresh="refresh" :refresher-enabled="true"
			:refresher-triggered="refreshing">
			<view class="record-list">
				<!-- 空状态 -->
				<view v-if="records.length === 0 && !loading" class="empty-state">
					<view class="empty-icon">
						<uni-icons type="car" size="60"></uni-icons>
					</view>
					<view class="empty-text">暂无加油记录</view>
					<view class="empty-subtext">点击下方按钮添加新的加油记录</view>
				</view>

				<!-- 记录卡片 -->
				<view class="record-card" v-for="(record, index) in records" :key="index" @click="viewDetail(record)">
					<!-- 卡片内容保持不变 -->
					<view class="card-header">
						<view class="driver-info">
							<view class="driver-avatar">{{ record.driverinfo.name.charAt(0) }}</view>
							<view>
								<view class="driver-name">{{ record.driverinfo.name }}</view>
								<view class="license">{{ record.driverinfo.license }} | {{ record.driverinfo.model }}
								</view>
							</view>
						</view>
						<view class="fuel-type">{{ record.fuelType === 0 ? '92#汽油' : '95#汽油' }}</view>
					</view>

					<view class="card-body">
						<view class="info-item">
							<view class="info-label">加油量</view>
							<view class="info-value">{{ record.fuelAmount }}升</view>
						</view>
						<view class="info-item">
							<view class="info-label">即时油价</view>
							<view class="info-value">{{ record.currentPrice }}元/升</view>
						</view>
						<view class="info-item">
							<view class="info-label">总花费</view>
							<view class="info-value cost-value">{{ record.cost }}元</view>
						</view>
					</view>

					<view class="card-footer">
						<view class="date-time">
							<uni-icons type="calendar" size="16" color="#95a5a6"></uni-icons>
							{{ formatDate(record.fuelDate) }}
						</view>
						<view class="status-badge">
							已提交
						</view>
					</view>
				</view>

				<!-- 加载更多指示器 -->
				<view v-if="loading" class="loading-container">
					<uni-icons type="spinner-cycle" size="24" color="#95a5a6" class="spinning"></uni-icons>
					加载中...
				</view>

				<!-- 没有更多数据 -->
				<view v-if="noMore" class="no-more">
					没有更多数据了
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import router from '../../../router'

	export default {
		data() {
			return {
				records: [],
				page: 1,
				pageSize: 10,
				loading: false,
				noMore: false,
				refreshing: false,
				keyword: '' // 搜索关键词
			}
		},
		mounted() {
			this.loadRecords()
		},
		methods: {
			// 加载加油记录（从云端）
			async loadRecords() {
				if (this.loading || this.noMore) return

				this.loading = true

				try {
					const obj = uniCloud.importObject('driver')
					const res = await obj.getFuelRecordAll(this.page, this.pageSize, this.keyword)

					if (res.code === 0) {
						const newRecords = res.data

						if (this.refreshing) {
							this.records = newRecords
							this.refreshing = false
						} else {
							this.records = [...this.records, ...newRecords]
						}

						if (newRecords.length < this.pageSize) {
							this.noMore = true
						}

						this.page++
					}
				} catch (err) {
					//console.error('获取加油记录失败', err)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 上拉加载更多
			loadMore() {
				if (this.loading || this.noMore) return
				this.loadRecords()
			},

			// 下拉刷新
			refresh() {
				this.page = 1
				this.noMore = false
				this.records = []
				this.refreshing = true
				this.loadRecords()
			},

			// 搜索输入事件
			onSearchInput(e) {
				//console.log(e, '1111')
				this.keyword = e
			},

			// 搜索确认事件
			onSearchConfirm() {
				this.page = 1
				this.noMore = false
				this.records = []
				this.refreshing = true
				this.loadRecords()
			},

			// 格式化日期
			formatDate(dateString) {
				const date = uni.$dayjs(dateString).format('YYYY-MM-DD HH:mm:ss')
				return date
			},

			// 查看详情
			viewDetail(record) {
				uni.$router.to({
					url: 'pagesA/driver/fuel/detail',
					params: {
						record: record
					}
				});
			},

			// 添加记录
			addRecord() {
				//console.log('addRecord')
				uni.$router.to('pagesC/driver/fuel/add', );
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans SC', -apple-system, sans-serif;
	}

	/* 搜索栏样式 */
	.search-bar {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	page {
		background-color: #f7f9fc;
		color: #333;
		padding: 0;
		line-height: 1.6;
		height: 100%;
	}

	.container {
		padding: 0;
		max-width: 800px;
		margin: 0 auto;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		background: linear-gradient(135deg, #3498db, #1a5276);
		color: white;
		box-shadow: 0 8rpx 24rpx rgba(52, 152, 219, 0.2);
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.filter-bar {
		display: flex;
		padding: 20rpx 30rpx;
		background: white;
		border-bottom: 1rpx solid #eee;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		font-size: 28rpx;
		color: #7f8c8d;
		position: relative;
	}

	.filter-item.active {
		color: #3498db;
		font-weight: 500;
	}

	.filter-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background: #3498db;
		border-radius: 3rpx;
	}

	.record-list {
		padding: 20rpx 25rpx;
	}

	.record-card {
		background: white;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 30rpx;
		overflow: hidden;
		position: relative;
		transition: all 0.3s ease;
	}

	.record-card:active {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 35rpx rgba(0, 0, 0, 0.12);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.driver-info {
		display: flex;
		align-items: center;
	}

	.driver-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #3498db, #2c3e50);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}

	.driver-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.license {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-top: 5rpx;
	}

	.fuel-type {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		background: #fef9e7;
		color: #f39c12;
		font-size: 24rpx;
	}

	.card-body {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.info-label {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-bottom: 10rpx;
	}

	.info-value {
		font-size: 32rpx;
		font-weight: 500;
		color: #2c3e50;
	}

	.cost-value {
		font-size: 36rpx;
		font-weight: 700;
		color: #e74c3c;
	}

	.card-footer {
		padding: 25rpx 30rpx;
		background: #f9fbfd;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #7f8c8d;
		font-size: 26rpx;
	}

	.date-time {
		display: flex;
		align-items: center;
	}

	.date-time uni-icons {
		margin-right: 10rpx;
	}

	.status-badge {
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		background: #e8f6ff;
		color: #3498db;
		font-size: 24rpx;
	}

	.loading-container {
		padding: 30rpx 0;
		text-align: center;
		color: #95a5a6;
		font-size: 26rpx;
	}

	.no-more {
		padding: 30rpx 0;
		text-align: center;
		color: #95a5a6;
		font-size: 26rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;
		text-align: center;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		background: #e1f0fa;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.empty-icon uni-icons {
		font-size: 80rpx;
		color: #3498db;
	}

	.empty-text {
		font-size: 32rpx;
		color: #7f8c8d;
		margin-bottom: 20rpx;
	}

	.empty-subtext {
		font-size: 26rpx;
		color: #95a5a6;
	}

	.refresh-indicator {
		text-align: center;
		padding: 20rpx 0;
		color: #95a5a6;
		font-size: 26rpx;
	}

	@media (max-width: 600px) {
		.header {
			padding: 20rpx 25rpx;
		}

		.header-title {
			font-size: 32rpx;
		}

		.filter-item {
			font-size: 26rpx;
		}
	}
</style>